import {Component, OnInit} from '@angular/core';
import {HireDeviceService} from '../../hireDevice.service';
import {NzMessageService} from 'ng-zorro-antd/message';
import {ActivatedRoute} from '@angular/router';
import {NzModalService} from 'ng-zorro-antd/modal';
import {RentClassManageService} from '../../rent-class-manage/rent-class-manage.service';

@Component({
  selector: 'app-commodity-edit',
  templateUrl: './commodity-edit.component.html',
  styleUrls: ['./commodity-edit.component.scss']
})
export class CommodityEditComponent implements OnInit {
  formData: any = {
    title: '',
    shortName: '',
    goodsType: 1,
    goodsLabel: '',
    typeList: ['', '', ''],
    hotSearchState: 1,
    hotSearch: '',
    searchWord: '',
    brand: '',
    status: 1,
    modelType: '',
    network: '',
    networkType: '',
    productVersion: '',
    version: '',
    color: [],
    rom: [],
    images: [],
    infoImages: [],
    leaseExplainImg: [],
    hireDate: {
      returnDevice: {id: 0, name: '租完须归还', checked: false, minDate: null, maxDate: null},
      returnOrPurchaseDevice: {id: 1, name: '租完可归还/买断', checked: false, minDate: null, maxDate: null},
      giveDevice: {id: 2, name: '租完即送', checked: false, minDate: null, maxDate: null},
    },
  };
  /**
   * @param rentId 租赁商品id
   * @param planId 租赁方案id
   * @param planName 租赁方案名称
   * @param color 颜色id
   * @param colorName 颜色名称
   * @param memory 机身存储id
   * @param memoryName 机身存储名称
   * @param stockoutFlag 是否缺货 0不缺货 1缺货
   * @param deposit 所需押金
   * @param buyout 买断价格
   * @param inventory 库存
   * @param quarterRent 90天租金
   * @param quarterRentDay 90天租金单价
   * @param halfyearRent 180天租金
   * @param halfyearRentDay 180天租金单价
   * @param yearRent 180天租金
   * @param yearRentDay 180天租金单价
   */
  specificationTable: any[] = [];
  hireDateList = [];
  hireColorList = [];
  hireRomList = [];
  readonly = false;
  verticalImgModal = {
    visible: false,
    images: []
  };
  firstCategory = [];
  secondCategory = [];
  thirdCategory = [];

  constructor(
    private hireDeviceService: HireDeviceService,
    private nzMessageService: NzMessageService,
    private activatedRoute: ActivatedRoute,
    private nzModalService: NzModalService,
    private rentClassManageService: RentClassManageService
  ) {
  }

  // tslint:disable:max-line-length
  async ngOnInit() {
    await this.hireDeviceService.getDict('hire_device_date').then((res: any) => {
      if (res.code === 0) {
        this.hireDateList = JSON.parse(res.data.content);
      }
    });
    await this.hireDeviceService.getDict('hire_device_rom').then((res: any) => {
      if (res.code === 0) {
        this.hireRomList = JSON.parse(res.data.content);
      }
    });
    await this.hireDeviceService.getDict('hire_device_color').then((res: any) => {
      if (res.code === 0) {
        this.hireColorList = JSON.parse(res.data.content);
      }
    });
    await this.rentClassManageService.getRentPlaneList({page: 1, pageSize: 99999}).then((res: any) => {
      if (res.code === 0) {
        this.firstCategory = res.data.records;
      }
    });
    const id = this.activatedRoute.snapshot.queryParams.id;
    const type = this.activatedRoute.snapshot.queryParams.type;
    this.readonly = type === 'view';
    if (id) {
      this.hireDeviceService.getCommodityDetail(id).then((res: any) => {
        console.log(res);
        this.formData = {
          id: type === 'edit' ? id : null,
          title: res.data.goods.title,
          status: res.data.goods.status,
          shortName: res.data.goods.shortName,
          goodsType: res.data.goods.goodsType,
          goodsLabel: res.data.goods.goodsLabel,
          typeList: [res.data.goods.firstType || '', res.data.goods.secondType || '', res.data.goods.thirdType || ''],
          hotSearchState: res.data.goods.hotSearchState,
          hotSearch: res.data.goods.hotSearch,
          searchWord: res.data.goods.searchWord,
          brand: res.data.goods.brand,
          modelType: res.data.goods.modelType,
          network: res.data.goods.network,
          networkType: res.data.goods.networkType,
          productVersion: res.data.goods.productVersion,
          version: res.data.goods.version,
          color: JSON.parse(res.data.goods.color),
          rom: JSON.parse(res.data.goods.memory),
          images: res.data.goods.imgs ? JSON.parse(res.data.goods.imgs) : [],
          infoImages: res.data.goods.goodsInfo ? JSON.parse(res.data.goods.goodsInfo) : [],
          leaseExplainImg: res.data.goods.leaseExplainImg ? JSON.parse(res.data.goods.leaseExplainImg) : [],
          hireDate: {
            returnDevice: {id: 0, name: '租完须归还', checked: false, minDate: null, maxDate: null},
            returnOrPurchaseDevice: {id: 1, name: '租完可归还/买断', checked: false, minDate: null, maxDate: null},
            giveDevice: {id: 2, name: '租完即送', checked: false, minDate: null, maxDate: null},
          },
        };
        // @ts-ignore
        this.secondCategory = this.firstCategory.filter((item: any) => item.id === this.formData.typeList[0])[0]?.list || [];
        // @ts-ignore
        this.thirdCategory = this.secondCategory.filter((item: any) => item.id === this.formData.typeList[1])[0]?.list || [];
        JSON.parse(res.data.goods.leasePlan).forEach((item: any) => {
          if (item.id === 0) {
            this.formData.hireDate.returnDevice = {...item, checked: true};
          } else if (item.id === 1) {
            this.formData.hireDate.returnOrPurchaseDevice = {...item, checked: true};
          } else if (item.id === 2) {
            this.formData.hireDate.giveDevice = {...item, checked: true};
          }
        });
        this.specificationTable = res.data.sku;
        this.generateTable();
      });
    }
  }

  // 添加颜色
  addColor() {
    if (this.formData.color.some((i: any) => (!i.id || !i.image))) {
      this.nzMessageService.error('存在未完善的颜色信息');
    } else {
      this.formData.color.push({id: '', image: ''});
    }
  }

  // 删除颜色
  deleteColor(index: number) {
    this.formData.color.splice(index, 1);
    this.generateTable();
  }

  // 内存点击
  romClick(id: any, name: string) {
    const index = this.formData.rom.findIndex((i: any) => i.id === id);
    if (index > -1) {
      this.formData.rom.splice(index, 1);
    } else {
      this.formData.rom.push({id, name});
    }
    this.formData.rom.sort((a: any, b: any) => a.id - b.id);
    this.generateTable();
  }

  // 锚点
  anchor(s: string) {
    // @ts-ignore
    document.querySelector(s).scrollIntoView({behavior: 'smooth'});
  }

  // 移除图片
  removeImg(index: any, key: string) {
    this.formData[key].splice(index, 1);
  }

  // 添加图片
  appendImg(url: any, key: string) {
    this.formData[key].push(url);
  }

  // 字典id转名称
  dictIdToName(id: any, type: 'date' | 'rom' | 'color') {
    let name = '未知';
    if (!id) {
      return name;
    }
    if (type === 'date') {
      // @ts-ignore
      name = this.hireDateList.filter((i: any) => i.id === id)[0].name;
    }
    if (type === 'rom') {
      // @ts-ignore
      name = this.hireRomList.filter((i: any) => i.id === id)[0].name;
    }
    if (type === 'color') {
      // @ts-ignore
      name = this.hireColorList.filter((i: any) => i.id === id)[0].name;
    }
    return name;
  }

  // 生成表格
  generateTable() {
    if (!this.formData.color.some((i: any) => i.id) ||
      !this.formData.rom.some((i: any) => i.id) ||
      !this.formData.hireDate.returnDevice.checked &&
      !this.formData.hireDate.returnOrPurchaseDevice.checked &&
      !this.formData.hireDate.giveDevice.checked) {
      this.specificationTable = [];
      return;
    }
    const colorIds = this.formData.color.map((c: any) => c.id);
    const romIds = this.formData.rom.map((c: any) => c.id);
    this.specificationTable = this.specificationTable.filter((item: any) => colorIds.includes(item.color * 1) && romIds.includes(item.memory * 1));
    console.log(this.specificationTable);
    let newSpecificationTable: any[] = [];
    // 租完须归还
    if (this.formData.hireDate.returnDevice.checked) {
      this.formData.color.forEach((color: any, colorIndex: number) => {
        if (!color.id) {
          return;
        }
        this.formData.rom.forEach((rom: any, rowIndex: number) => {
          newSpecificationTable.push({
            specRowNum: colorIndex === 0 && rowIndex === 0 ? this.formData.color.length * this.formData.rom.length : 0,
            colorRowNum: rowIndex === 0 ? this.formData.rom.length : 0,
            rentId: '',
            planId: this.formData.hireDate.returnDevice.id,
            planName: this.formData.hireDate.returnDevice.name,
            color: color.id,
            colorName: color.name,
            memory: rom.id,
            memoryName: rom.name,
            stockoutFlag: false,
            equipmentCost: '',
            deposit: '',
            buyout: '',
            quarterRent: '',
            quarterRentDay: '',
            quarterRentAvailable: this.formData.hireDate.returnDevice.minDate <= 10 && 10 <= this.formData.hireDate.returnDevice.maxDate,
            halfyearRent: '',
            halfyearRentDay: '',
            halfyearAvailable: this.formData.hireDate.returnDevice.minDate <= 20 && 20 <= this.formData.hireDate.returnDevice.maxDate,
            yearRent: '',
            yearRentDay: '',
            yearRentAvailable: this.formData.hireDate.returnDevice.minDate <= 30 && 30 <= this.formData.hireDate.returnDevice.maxDate,
            inventory: '',
          });
        });
      });
    }
    // 租完可归还/买断
    if (this.formData.hireDate.returnOrPurchaseDevice.checked) {
      this.formData.color.forEach((color: any, colorIndex: number) => {
        if (!color.id) {
          return;
        }
        this.formData.rom.forEach((rom: any, rowIndex: number) => {
          newSpecificationTable.push({
            specRowNum: colorIndex === 0 && rowIndex === 0 ? this.formData.color.length * this.formData.rom.length : 0,
            colorRowNum: rowIndex === 0 ? this.formData.rom.length : 0,
            rentId: '',
            planId: this.formData.hireDate.returnOrPurchaseDevice.id,
            planName: this.formData.hireDate.returnOrPurchaseDevice.name,
            color: color.id,
            colorName: color.name,
            memory: rom.id,
            memoryName: rom.name,
            stockoutFlag: false,
            equipmentCost: '',
            deposit: '',
            buyout: '',
            quarterRent: '',
            quarterRentDay: '',
            quarterRentAvailable: this.formData.hireDate.returnOrPurchaseDevice.minDate <= 10 && 10 <= this.formData.hireDate.returnOrPurchaseDevice.maxDate,
            halfyearRent: '',
            halfyearRentDay: '',
            halfyearAvailable: this.formData.hireDate.returnOrPurchaseDevice.minDate <= 20 && 20 <= this.formData.hireDate.returnOrPurchaseDevice.maxDate,
            yearRent: '',
            yearRentDay: '',
            yearRentAvailable: this.formData.hireDate.returnOrPurchaseDevice.minDate <= 30 && 30 <= this.formData.hireDate.returnOrPurchaseDevice.maxDate,
            inventory: '',
          });
        });
      });
    }
    // 租完即送
    if (this.formData.hireDate.giveDevice.checked) {
      this.formData.color.forEach((color: any, colorIndex: number) => {
        if (!color.id) {
          return;
        }
        this.formData.rom.forEach((rom: any, rowIndex: number) => {
          newSpecificationTable.push({
            specRowNum: colorIndex === 0 && rowIndex === 0 ? this.formData.color.length * this.formData.rom.length : 0,
            colorRowNum: rowIndex === 0 ? this.formData.rom.length : 0,
            rentId: '',
            planId: this.formData.hireDate.giveDevice.id,
            planName: this.formData.hireDate.giveDevice.name,
            color: color.id,
            colorName: color.name,
            memory: rom.id,
            memoryName: rom.name,
            stockoutFlag: false,
            equipmentCost: '',
            deposit: '',
            buyout: '',
            quarterRent: '',
            quarterRentDay: '',
            quarterRentAvailable: this.formData.hireDate.giveDevice.minDate <= 10 && 10 <= this.formData.hireDate.giveDevice.maxDate,
            halfyearRent: '',
            halfyearRentDay: '',
            halfyearAvailable: this.formData.hireDate.giveDevice.minDate <= 20 && 20 <= this.formData.hireDate.giveDevice.maxDate,
            yearRent: '',
            yearRentDay: '',
            yearRentAvailable: this.formData.hireDate.giveDevice.minDate <= 30 && 30 <= this.formData.hireDate.giveDevice.maxDate,
            inventory: '',
          });
        });
      });
    }
    newSpecificationTable = newSpecificationTable.map(newItem => {
      this.specificationTable.forEach(oldItem => {
        if (newItem.planId * 1 === oldItem.planId * 1 && newItem.memory * 1 === oldItem.memory * 1 && newItem.color * 1 === oldItem.color * 1) {
          newItem = {
            ...JSON.parse(JSON.stringify(oldItem)),
            quarterRentAvailable: newItem.quarterRentAvailable,
            halfyearAvailable: newItem.halfyearAvailable,
            yearRentAvailable: newItem.yearRentAvailable,
            specRowNum: newItem.specRowNum,
            colorRowNum: newItem.colorRowNum,
          };
          newItem = {
            ...newItem,
            quarterRent: newItem.quarterRentAvailable ? newItem.quarterRent : '',
            quarterRentDay: newItem.quarterRentAvailable ? newItem.quarterRentDay : '',
            halfyearRent: newItem.halfyearAvailable ? newItem.halfyearRent : '',
            halfyearRentDay: newItem.halfyearAvailable ? newItem.halfyearRentDay : '',
            yearRent: newItem.yearRentAvailable ? newItem.yearRent : '',
            yearRentDay: newItem.yearRentAvailable ? newItem.yearRentDay : '',
          };
        }
      });
      return newItem;
    });
    this.specificationTable = newSpecificationTable;
  }

  // 判断是否在已选内存列表
  hasRom(id: any) {
    return this.formData.rom.some((i: any) => i.id === id);
  }

  // 判断是否在已选颜色列表
  hasColor(id: any) {
    return this.formData.color.some((i: any) => i.id === id);
  }

  // 日均价格计算
  priceChange(price: number, keySum: string, data: any, key: string, day: number) {
    data[keySum] = price;
    data[key] = Math.floor(price / day * 100) / 100;
  }

  // 颜色改变
  colorChange(color: any, id: any) {
    color.id = id;
    color.name = this.dictIdToName(id, 'color');
    this.generateTable();
  }

  // 租期改变
  dateRangeChange(key1: string, key2: string, id: any) {
    this.formData.hireDate[key1][key2] = id;
    this.generateTable();
  }

  // 设置主图
  setMainImg(index: any) {
    this.formData.images.unshift(...this.formData.images.splice(index, 1));
  }

  // 顶部锚点数字
  anchorNum(type: 'baseInfo' | 'category' | 'hireInfo' | 'sale' | 'commodity') {
    let num = 0;
    if (type === 'baseInfo') {
      num += this.formData.title ? 1 : 0;
      num += this.formData.goodsType !== null ? 1 : 0;
      num += this.formData.goodsLabel ? 1 : 0;
      num += this.formData.typeList[2] ? 1 : 0;
      num += this.formData.hotSearchState !== null ? 1 : 0;
      num += this.formData.hotSearchState === 0 && this.formData.hotSearch !== '' && this.formData.hotSearch !== null ? 1 : 0;
    }
    if (type === 'category') {
      num += this.formData.brand ? 1 : 0;
      num += this.formData.modelType ? 1 : 0;
      num += this.formData.color.length && this.formData.color.every((i: any) => i.id && i.image) ? 1 : 0;
      num += this.formData.rom.length ? 1 : 0;
    }
    if (type === 'hireInfo') {
      // 判断租赁方案是否已完成
      num += (this.formData.hireDate.returnDevice.checked || this.formData.hireDate.returnOrPurchaseDevice.checked || this.formData.hireDate.giveDevice.checked) &&
      (!this.formData.hireDate.returnDevice.checked || (this.formData.hireDate.returnDevice.checked && this.formData.hireDate.returnDevice.minDate && this.formData.hireDate.returnDevice.maxDate)) &&
      (!this.formData.hireDate.returnOrPurchaseDevice.checked || (this.formData.hireDate.returnOrPurchaseDevice.checked && this.formData.hireDate.returnOrPurchaseDevice.minDate && this.formData.hireDate.returnOrPurchaseDevice.maxDate)) &&
      (!this.formData.hireDate.giveDevice.checked || (this.formData.hireDate.giveDevice.checked && this.formData.hireDate.giveDevice.minDate && this.formData.hireDate.giveDevice.maxDate))
        ? 1 : 0;
    }
    if (type === 'sale') {
      this.specificationTable.forEach((spec: any) => {
        if (spec.planId === 0 && (spec.deposit && spec.equipmentCost && spec.inventory !== null && spec.inventory !== '' &&
          (!spec.quarterRentAvailable || spec.quarterRentAvailable && spec.quarterRent) &&
          (!spec.halfyearAvailable || spec.halfyearAvailable && spec.halfyearRent) &&
          (!spec.yearRentAvailable || spec.yearRentAvailable && spec.yearRent)
        )) {
          num += 1;
        } else if (spec.planId === 1 && (spec.buyout && spec.deposit && spec.equipmentCost && spec.inventory !== null && spec.inventory !== '' &&
          (!spec.quarterRentAvailable || spec.quarterRentAvailable && spec.quarterRent) &&
          (!spec.halfyearAvailable || spec.halfyearAvailable && spec.halfyearRent) &&
          (!spec.yearRentAvailable || spec.yearRentAvailable && spec.yearRent)
        )) {
          num += 1;
        } else if (spec.planId === 2 && (spec.buyout && spec.deposit && spec.equipmentCost && spec.inventory !== null && spec.inventory !== '' &&
          (!spec.quarterRentAvailable || spec.quarterRentAvailable && spec.quarterRent) &&
          (!spec.halfyearAvailable || spec.halfyearAvailable && spec.halfyearRent) &&
          (!spec.yearRentAvailable || spec.yearRentAvailable && spec.yearRent)
        )) {
          num += 1;
        }
      });
    }
    if (type === 'commodity') {
      num += this.formData.images.length ? 1 : 0;
      num += this.formData.infoImages.length ? 1 : 0;
    }
    return num;
  }

  save() {
    if (!this.formData.title) {
      this.nzMessageService.warning('请输入商品标题');
      return;
    }
    if (!this.formData.goodsType) {
      this.nzMessageService.warning('请选择商品类型');
      return;
    }
    if (!this.formData.goodsLabel) {
      this.nzMessageService.warning('请输入商品标签');
      return;
    }
    if (!this.formData.typeList[2]) {
      this.nzMessageService.warning('请选择三级分类');
      return;
    }
    if (this.formData.hotSearchState === 0 && (this.formData.hotSearch === '' || this.formData.hotSearch === null)) {
      this.nzMessageService.warning('请输入热租顺序');
      return;
    }
    if (!this.formData.brand) {
      this.nzMessageService.warning('请输入标准品牌名称');
      return;
    }
    if (!this.formData.modelType) {
      this.nzMessageService.warning('请输入标准型号名称');
      return;
    }
    if (!this.formData.color.length) {
      this.nzMessageService.warning('请配置商品颜色');
      return;
    }
    if (this.formData.network === null || this.formData.network === '') {
      this.nzMessageService.warning('请选择网络制式');
      return;
    }
    if (this.formData.networkType === null || this.formData.networkType === '') {
      this.nzMessageService.warning('请选择网络类型');
      return;
    }
    if (this.formData.version === null || this.formData.version === '') {
      this.nzMessageService.warning('请选择版本');
      return;
    }
    if (this.formData.color.some((i: any) => (!i.id || !i.image))) {
      this.nzMessageService.error('存在未完善的颜色信息');
      return;
    }
    if (!this.formData.rom.length) {
      this.nzMessageService.warning('请选择机身存储');
      return;
    }
    if (!this.formData.hireDate.returnDevice.checked && !this.formData.hireDate.returnOrPurchaseDevice.checked && !this.formData.hireDate.giveDevice.checked) {
      this.nzMessageService.warning('请选择租赁方案');
      return;
    }
    if (this.anchorNum('hireInfo') === 0) {
      this.nzMessageService.warning('存在未完善的租赁方案');
      return;
    }
    if (this.anchorNum('sale') !== this.specificationTable.length) {
      this.nzMessageService.warning('存在未完善的销售规格信息');
      return;
    }
    if (!this.formData.images.length) {
      this.nzMessageService.warning('请选择商品图片');
      return;
    }
    if (!this.formData.infoImages.length) {
      this.nzMessageService.warning('请选择商品信息图片');
      return;
    }
    if (!this.formData.leaseExplainImg.length) {
      this.nzMessageService.warning('请选择租赁说明图片');
      return;
    }
    const formData = {
      // Id
      id: this.formData.id,
      // 标题
      title: this.formData.title,
      // 营销语句
      shortName: this.formData.shortName,
      // 商品类型 1全新 2二手
      goodsType: this.formData.goodsType,
      // 商品标签
      goodsLabel: this.formData.goodsLabel,
      // 所属分类
      typeList: JSON.stringify(this.formData.typeList),
      // 是否热租
      hotSearchState: this.formData.hotSearchState,
      // 热租顺序
      hotSearch: this.formData.hotSearch,
      // 搜索关键词
      searchWord: this.formData.searchWord,
      // 商品品牌
      brand: this.formData.brand,
      // 状态
      status: this.formData.status,
      // 商品型号
      modelType: this.formData.modelType,
      // 网络制式
      network: this.formData.network,
      // 网络类型
      networkType: this.formData.networkType,
      // productVersion
      productVersion: this.formData.productVersion,
      // 版本
      version: this.formData.version,
      // 颜色
      colorList: this.formData.color,
      // 存储
      memoryList: this.formData.rom,
      // 租赁方案
      leasePlanList: [] as any,
      // 商品图片
      imgsList: this.formData.images,
      // 商品信息图片
      goodsInfoList: this.formData.infoImages,
      // 租赁信息图片
      leaseExplainImg: JSON.stringify(this.formData.leaseExplainImg),
      sku: this.specificationTable.map(item => ({...item, stockoutFlag: item.stockoutFlag ? 1 : 0}))
    };
    // 租赁方案
    if (this.formData.hireDate.returnDevice.checked) {
      formData.leasePlanList.push({
        id: this.formData.hireDate.returnDevice.id,
        name: this.formData.hireDate.returnDevice.name,
        minDate: this.formData.hireDate.returnDevice.minDate,
        maxDate: this.formData.hireDate.returnDevice.maxDate,
      });
    }
    if (this.formData.hireDate.returnOrPurchaseDevice.checked) {
      formData.leasePlanList.push({
        id: this.formData.hireDate.returnOrPurchaseDevice.id,
        name: this.formData.hireDate.returnOrPurchaseDevice.name,
        minDate: this.formData.hireDate.returnOrPurchaseDevice.minDate,
        maxDate: this.formData.hireDate.returnOrPurchaseDevice.maxDate,
      });
    }
    if (this.formData.hireDate.giveDevice.checked) {
      formData.leasePlanList.push({
        id: this.formData.hireDate.giveDevice.id,
        name: this.formData.hireDate.giveDevice.name,
        minDate: this.formData.hireDate.giveDevice.minDate,
        maxDate: this.formData.hireDate.giveDevice.maxDate,
      });
    }
    this.hireDeviceService.addCommodity(formData).then((res: any) => {
      if (res.code === 0) {
        this.nzMessageService.success('操作成功');
        history.back();
      }
    });
  }

  // 租赁方案改变
  hirePlanChange() {
    if (!this.formData.hireDate.returnDevice.checked) {
      this.formData.hireDate.returnDevice.minDate = null;
      this.formData.hireDate.returnDevice.maxDate = null;
    }
    if (!this.formData.hireDate.returnOrPurchaseDevice.checked) {
      this.formData.hireDate.returnOrPurchaseDevice.minDate = null;
      this.formData.hireDate.returnOrPurchaseDevice.maxDate = null;
    }
    if (!this.formData.hireDate.giveDevice.checked) {
      this.formData.hireDate.giveDevice.minDate = null;
      this.formData.hireDate.giveDevice.maxDate = null;
    }
    this.generateTable();
  }

  defaultRule() {
    this.nzModalService.create({
      nzTitle: '默认规则',
      nzContent: `
            <div>一、为方便价格计算，平台统一采用以下租期换算规则:1个月=30天，3个月=90天，6个月=180天，1年=365天，2年=730天，3年=1095天;</div>
            <div>二、商品价格展示以天租金为单位，实际结算以总租金为准;</div>
            <div>三、下单过程中，若商品总租金无法被期数整除，差价将在尾期补全;</div>
            <div>计算示例:</div>
            <div>P商家设置「A商品」1年的总租金为3500元;</div>
            <div>U用户选择租赁该商品时，平台会将总租金分成12期;</div>
            <div>因为3500无法被12整除，根据四舍五入规则，平台将取291.67/期作为每期租金;又因为291.67x12-3500=0.04元，所以平台将会在尾期进行价格补全(即尾期为291.67-0.04=291.63)，保证订单的总租金为3500元;</div>
            `,
      nzMaskClosable: false,
      nzOkText: null,
      nzCancelText: '关闭',
      nzClosable: false,
      nzOnOk: () => {
      }
    });
  }

  showPreviewImgVertical(images: any) {
    this.verticalImgModal = {
      visible: true,
      images
    };
  }

  hidePreviewImgVertical() {
    this.verticalImgModal = {
      visible: false,
      images: []
    };
  }

  firstCategoryChange(id: any) {
    console.log(id);
    this.formData.typeList[1] = '';
    this.secondCategory = [];
    this.formData.typeList[2] = '';
    this.thirdCategory = [];
    if (id !== null && id !== '') {
      // @ts-ignore
      const result = this.firstCategory.filter((item: any) => item.id === id)[0]?.list;
      if (result && result.length) {
        this.secondCategory = result;
      } else {
        this.nzMessageService.warning('当前所选不存在二级分类请注意');
      }
    }
  }

  secondCategoryChange(id: any) {
    this.formData.typeList[2] = '';
    this.thirdCategory = [];
    if (id !== null && id !== '') {
      // @ts-ignore
      const result = this.secondCategory.filter((item: any) => item.id === id)[0]?.list;
      if (result && result.length) {
        this.thirdCategory = result;
      } else {
        this.nzMessageService.warning('当前所选不存在三级分类请注意');
      }
    }
  }
}
